﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Earthwatchers Admin</title>
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="jquery.base64.js" type="text/javascript"></script>

    <script type="text/javascript">
        function getAuthString() {
            return "Basic " + $.base64Encode(document.getElementById("tbUsername").value + ":" + document.getElementById("tbPassword").value);
        }

        function LoadBasecamps()
        {
            $('#basecampstable').html('');

            $.ajax({
                type: "GET",
                data: "{\"Name\":\"" + document.getElementById("tbUsername").value + "\",\"Password\":\"" + document.getElementById("tbPassword").value + "\" }",
                url: "../api/basecamp",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Authorization", getAuthString());
                },
                contentType: "application/json ; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $(result).each(function () {
                        var html = '<td>' + $(this).attr('Name') + '</td>'
                        + '<td>' + $(this).attr('DetailName') + '</td>'
                        + '<td class="tdnumber">' + $(this).attr('Latitude') + '</td>'
                        + '<td class="tdnumber">' + $(this).attr('Longitude') + '</td>'
                        + '<td class="tdnumber">' + $(this).attr('Probability') + '</td>'
                        + '<td><a href="#" onclick="deleteBasecamp(' + $(this).attr('Id') + ');" title="Borrar Basecamp">X</a>'
                        + '<td><a href="#" title="Editar Basecamp">&laquo;&laquo;&laquo;&laquo;</a>';/*onclick="editBasecamp(' + $(this).attr('Id') + ');"*/

                        $('<tr></tr>').html(html).appendTo('#basecampstable');
                    });
                },
                error: function (xhr, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }

        function deleteBasecamp(id)
        {
            if (id == "") {
                alert("error");
                return false;
            }

            if (confirm('Está seguro que desea borrar este basecamp?')) {
                $.ajax({
                    type: 'POST',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Authorization", getAuthString());
                    },
                    url: "../api/basecamp/del",
                    data: JSON.stringify(id),
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        alert('Operación Exitosa!');
                        LoadBasecamps();
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        alert(errorThrown);
                    }
                });
            }
        }

        $(function () {

            //Cargo el basecampselect
            $.ajax({
                type: "GET",
                url: "../api/basecamp/bases",
                contentType: "application/json ; charset=utf-8",
                dataType: "json",
                success: function (items) {
                    $.each(items, function (i, item) {
                        $('#basecampselect').append($('<option>', {
                            value: item.Id,
                            text: item.Name
                        }));
                    });
                },
                error: function (xhr, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });

            //Agregar Basecamp
            $("#addBasecamp").click(function () {
                var lat = $('#latitudeInput').val();
                var long = $('#longitudInput').val();
                var name = $('#nameInput').val();
                var probability = parseInt($('#probabilityInput').val());
                var basecampid = $('#basecampselect').val();
                if (isNaN(probability) || probability < 0 || probability > 100)
                {
                    alert('La probabilidad debe estar entre 0 y 100');
                    return;
                }

                if (!isNaN(lat) && !isNaN(long) && !isNaN(probability) && lat != '' && long != '' && probability != '' && name != '') {
                    
                    var basecamp = new Object();
                    basecamp.Id = basecampid;
                    basecamp.Latitude = lat;
                    basecamp.Longitude = long;
                    basecamp.Probability = probability;
                    basecamp.DetailName = name;

                    $.ajax({
                        type: "POST",
                        url: "../api/basecamp",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("Authorization", getAuthString());
                        },
                        data: JSON.stringify(basecamp),
                        contentType: "application/json ; charset=utf-8",
                        dataType: "json",
                        success: function () {
                            LoadBasecamps();
                            alert("Congratulations, basecamp added.");
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            alert("error, something is wrong adding basecamp");
                        }
                    });
                }
                else {
                    alert('Debe completar todos los datos y los valores deben ser numéricos');
                }
            });

            $("#LoadBasecampsButton").click(function () {
                LoadBasecamps();
            });
        });
    </script>
    <style>
        body {
            font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
        }

        .tdnumber {
            text-align: right;
        }

        .tdcheck {
            text-align: center;
        }

        .url {
            width: 300px;
        }
        .label {
            float: left;
            width: 120px;
        }
    </style>
</head>
<body>
    <h3>Administrator - Basecamp</h3>
    <br />
    <br />
    username:
    <input type="text" id="tbUsername" value="" /><br />
    password:
    <input type="password" id="tbPassword" value="" />
    <br />
    <br />
    <input id="LoadBasecampsButton" type="button" value="Cargar Basecamps" />
    <br />
    <h4>Agregar Basecamp</h4>
    <div>
        <div class="label">Basecamp</div>
        <div><select id="basecampselect"></select></div>
        <div class="label">Nombre</div>
        <div><input id="nameInput" type="text" maxlength="50" /></div>
        <div class="label">Latitud</div>
        <div><input id="latitudeInput" type="number" /></div>
        <div class="label">Longitud</div>
        <div><input id="longitudInput" type="number" /></div>
        <div class="label">Probabilidad</div>
        <div><input id="probabilityInput" type="number" /></div>
        <input id="addBasecamp" type="button" value="Agregar" />
    </div>
    <h4>Listado de Basecamps</h4>
    <table border="1" cellpadding="6" cellspacing="0">
        <thead>
            <tr style="background-color: #cecece">
                <td>Basecamp</td>
                <td>Nombre</td>
                <td>Latitud</td>
                <td>Longitud</td>
                <td>Probabilidad</td>
                <td></td>
                <td>Editar</td>
            </tr>
        </thead>
        <tbody id="basecampstable">
        </tbody>
    </table>
    <br />
    <a href="index.html">back</a>

</body>
</html>
